<template lang="pug">
  .nav-bar-toolsbar(
    v-if="isShowNav && getNavMenu.length", :class="[isShowNav ? 'animated bounceInLeft': 'bounceOutLeft']")
    .mask(@click="hideMenu")
    .nav-wrap
      .close(@click="hideMenu")
        i.iconfont.icon-close
      .nav-top.pos-r
        h2.title 菜单列表
      .nav-body
        Scroll(:data="getNavMenu")
          ul.nav-list
            li.nav-list-item(
              v-for="(item, index) in getNavMenu",
              :key="index",
              @click="handleMenuClick(item, index)")
              .inner
                .icon
                  i.iconfont(:class="item.icon")
                .text.omit {{item.title}}
              ul.nav-list.submenu(v-if="item.children && item.children.length > 0")
                li.nav-list-item(
                  v-for="(c, i) in item.children",
                  :key="i",
                  @click.stop.prevent="handleMenuClick(c, i)")
                  .inner
                    .icon
                      i.iconfont(:class="c.icon")
                    .text.omit {{c.title}}
</template>

<script>
import Scroll from 'Comps/Scroll'
import themeMixin from '@/mixins/theme'
import menuMixin from '@/mixins/menu'
import { handleCustomMenu } from '@/utils/menu'

export default {
  mixins: [themeMixin, menuMixin],
  data() {
    return {
      isShowNav: false
    }
  },
  mounted() {
    this.$vgo.on('navmenu:left', () => {
      this.isShowNav = true
    })
  },
  methods: {
    handleMenuClick(item, index) {
      this.hideMenu()
      handleCustomMenu(item)
    },
    hideMenu() {
      this.isShowNav = false
    }
  },
  components: {
    Scroll
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/mixin.styl'
@import '../../../assets/styles/color.styl'

.nav-bar-toolsbar
  full-cover()
  .mask
    full-cover()
    background-color: rgba($black, .6)
  .nav-wrap
    position: absolute
    left: 0
    top: 0
    bottom: 0
    width: 200px
    max-width: 300px
    height: 100%
    padding: 20px
    background-color: #fff
    overflow: hidden
    box-sizing: border-box
    z-index: 2
    .close
      position: absolute
      right: 10px
      top: 5px
      z-index: 100
      i
        font-size: 24px
        color: $danger
    .nav-top
      .title
        position: relative
        margin-bottom: 15px
        font-size: 18px
        color: $black-light
    .nav-body, .wrapper
      position: fixed
      top: 54px
      bottom: 10px
      width: 100%
      overflow: hidden
      .nav-list
        color: $black-light
        .nav-list-item
          .submenu
            margin-left: 15px
            .nav-list-item .inner .text
              font-size: 14px
          .inner
            display: flex
            line-height: 24px
            margin-bottom: 5px
            .text
              flex: 1
              font-size: 16px
              color: $black-light
            .icon
              flex: 0 0 24px
              width: 24px
              margin-right: 6px
</style>
